<template>
    <div>
        <Card class="wrap" :bordered="false" :dis-hover="true">
            <slot></slot>
            <Table height="600" border class="table" @on-selection-change="handleSelectionChange" ref="selection" :columns="columns" :data="list" :loading="loading">
                <template slot-scope="{ row }" slot="name">
                    <strong>{{ row.name }}</strong>
                </template>
            </Table>
            <div class="page-wrap" v-if="!isPage">
                <div class="page-wrap-total">共 {{total}} 条</div>
                <div>
                    <Page placement="top" :total="total" :current="current" @on-change="changePage" @on-page-size-change="changePageSize" show-sizer></Page>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
export default {
    name: "GlobalTables",
    props: [
        "list",
        "columns",
        "loading",
        "total",
        "showTotal",
        "current",
        "isPage"
    ],
    data() {
        return {
            switchTitle: ""
        };
    },
    // 操作-表格表头-表格数据-是否搜索-是否加载
    methods: {
        changePage(num) {
            this.$emit("changePage", "page", num);
        },
        changePageSize(num) {
            this.$emit("changePage", "pageSize", num);
        },
        handleSelectionChange(num) {
            this.$emit("handleAllSelect", num);
        }
    }
};
</script>

<style lang="less" scoped>
.wrap {
    padding-bottom: 10px;
}
.page-wrap {
    position: absolute;
    bottom: -100px;
    right: 0;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.page-wrap-total {
    border-radius: 3px;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    margin: 0 20px;
    border: 1px solid #dcdee2;
    font-size: 12px;
}
.search-con {
    padding: 10px 0;
    .search {
        &-col {
            display: inline-block;
            width: 200px;
        }
        &-input {
            display: inline-block;
            width: 200px;
            margin-left: 2px;
        }
        &-btn {
            margin-left: 2px;
        }
    }
}
.list-btn {
    margin: 0 5px;
}
.delete-btn {
    background: #fc8675;
    border: none;
}
.edit-btn {
    background: #5ab1ef;
    border: none;
}
</style>


